import { reactive, watchEffect, readonly } from "vue";
import { setCSSVar } from "@/utils/dom";
import useTheme from "@/hooks/useTheme";
export const configKey = "__CONFIG_KEY__";
const config = reactive({
  lang: "zh", // 语言
  theme: "", // 主题
  themeMode: "light", // 主题模式 暗色/亮色
  pageTransitionMode: "out-in", // 页面切换动画模式
  tabsStyle: "google-tabs", // tab栏标签样式 默认谷歌类型标签页
  // elementPlus
  elementPlus: {
    size: "small", // 'large' | 'default' | 'small'
    messageCount: null, // 最大显示消息个数
    messageDuration: 3000, // 消息显示时间 为 0 不会关闭
    themeColor: "#00C16A", // element plus 主题色
  },
  // 其他颜色配置
  colors: {},
  // 布局
  layout: {
    header: "left",
  },
  // 系统配置 不可更改
  system: readonly({
    apiBaseURL: import.meta.env.VITE_API_BASE_URL,
    name: "Vue3 Admin", // 项目名称
    autoCreateRouter: false, // 是否自动创建路由（根据 views 目录）
  }),
});

const { changeElementPlusTheme, theme, themeMode, changeTheme } = useTheme();

// 初始获取配置
(() => {
  const cache = JSON.parse(localStorage.getItem(configKey)); // || getConfig();
  if (cache) {
    for (const key in cache) {
      config[key] = cache[key];
    }
  }
  theme.value = config.theme;
  themeMode.value = config.themeMode;
  setCSSVar("themeColor", config.elementPlus.themeColor);
  changeElementPlusTheme(config.elementPlus.themeColor);
  changeTheme(config.theme);
})();

watchEffect(() => {
  const cache = {};
  for (const key in config) {
    if (key === "system") {
      continue;
    }
    cache[key] = config[key];
  }
  localStorage.setItem(configKey, JSON.stringify(cache));
});

watchEffect(() => {
  config.themeMode = themeMode.value;
  config.theme = theme.value;
});

export default config;
